<template>
  <div class="contentView" v-loading="formLoading" :style="`height:${contentHeight}px`">
    <div class="routeHeader">
      <el-button
        class="mr-5px"
        @click="submitForm('save')"
        type="primary"
        :disabled="formLoading"
        v-hasPermi="['order:marketing-receipt:save']"
        >保 存</el-button
      >
      <el-button
        class="mr-5px"
        @click="submitForm('submit')"
        type="primary"
        :disabled="formLoading"
        v-hasPermi="['order:marketing-receipt:submit']"
        >提 交</el-button
      >
      <el-button @click="goBack">关 闭</el-button>
    </div>
    <el-scrollbar :style="`height:${contentHeight - 63}px`">
      <el-table ref="multipleTableRef" :data="[formData]" style="width: 100%" border>
        <el-table-column type="index" width="80" label="序号" align="center" />
        <el-table-column
          :label="item.label"
          :min-width="item.width"
          :prop="item.val"
          v-for="item in tableTitle"
          :key="item.val"
          :align="item.align"
          :header-align="item.align"
        >
          <template #default="scope">
            <template v-if="item.val == 'dictReceiptYesNo'">
              <el-select v-model="scope.row[item.val]" placeholder="" clearable>
                <el-option
                  v-for="dict in getIntDictOptions('is_machining')"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                />
              </el-select>
            </template>
            <template v-else-if="item.val == 'receiptUrl'">
              <div
                style="display: flex; align-items: center"
                v-show="!ruleList.includes(scope.row.receiptUrl)"
              >
                <span @click="showPdf(scope.row.receiptUrl)">{{ scope.row.receiptFileName }}</span>
                <Icon icon="ep:delete" class="ml-5px" @click="delFile" />
              </div>
              <UploadFile
                style="width: auto"
                v-show="ruleList.includes(scope.row.receiptUrl)"
                v-model="fileList"
                :isShowTip="false"
                :limit="1"
                :fileSize="200"
                :fileType="['pdf', 'png', 'jpg']"
                @update:modelValue="uploadFile"
              />
            </template>

            <template v-else>
              <el-button
                v-if="item.label == '图纸图号'"
                type="primary"
                link
                @click="jumpPdfFile(scope.row[item.val],scope.row.productNumber)"
                >{{ scope.row[item.val] }}
              </el-button>
              <template v-else>
                {{
                  item.dictType
                    ? getDictLabel(item.dictType, scope.row[item.val])
                    : scope.row[item.val]
                }}
              </template>
            </template>
          </template>
        </el-table-column>
      </el-table>
    </el-scrollbar>
  </div>
</template>
<script setup lang="ts">
   import { getDictLabel, getIntDictOptions } from '@/utils/dict'
   import * as MarketingReceiptApi from '@/api/orderManagement/marketing/marketingReceipt'
  import { jumpPdfFile } from '@/utils/formCreate'
   const { t } = useI18n() // 国际化
   const message = useMessage() // 消息弹窗
   const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
   import { useTagsViewStore } from '@/store/modules/tagsView'
   const formData = ref({
     id: undefined,
     workNumber: undefined,
     productNumber: undefined,
     productName: undefined,
     drawingNumber: undefined,
     taskNumber: undefined,
     modelSpecification: undefined,
     orderQuantity: undefined,
     completeDate: undefined,
     debuggingOrderUrl: undefined,
     debuggingOrderFileName: undefined,
     dictReceiptYesNo: undefined,
     receiptUrl: undefined,
     receiptFileName: undefined,
     dictOrderStatus: undefined,
     dictStatus: undefined,
     creatorName: undefined
   })
   //附件
   const fileList = ref([])
   // 附件上传
   const uploadFile = (data) => {
     const res = JSON.parse(data)
     console.log(res)
     if (res.length) {
       formData.value.receiptFileName = res[0].name
       formData.value.receiptUrl = res[0].url
     } else {
       formData.value.receiptFileName = ''
       formData.value.receiptUrl = ''
     }
   }
   //删除附件
   const delFile = () => {
     formData.value.receiptFileName = ''
     formData.value.receiptUrl = ''
     fileList.value = []
   }
   /** 提交表单 */
   const ruleList = ref([null, undefined, ''])
   const submitForm = async (type: string) => {
     const data = formData.value as unknown as MarketingReceiptApi.MarketingReceiptVO
     data.type = type == 'save' ? 1 : 2
     //如果验收是Y
     if (data.dictReceiptYesNo == 10) {
       if (ruleList.value.includes(data.receiptUrl)) {
         message.error('附件不能为空')
         return
       }
     }
     formLoading.value = true
     try {
       await MarketingReceiptApi.updateMarketingReceipt(data)
       message.success(t('common.updateSuccess'))
       goBack()
     } finally {
       formLoading.value = false
     }
   }
   /**返回 */
   const tagsViewStore = useTagsViewStore()
   const route = useRouter() // 路由
   const goBack = async () => {
     //获取当前路由并删除tagView
     tagsViewStore.delView(route.currentRoute.value)
     //跳转列表页
     route.push({
       path: '/orderManagement/orderManagement/marketing/marketingReceipt'
     })
   }
   //表头
   const tableTitle = ref([
     {
       label: '任务单号',
       val: 'taskNumber',
       width: 200,
       align: 'left'
     },
     {
       label: '产品编号',
       val: 'productNumber',
       width: 200,
       align: 'left'
     },
     {
       label: '产品名称',
       val: 'productName',
       width: 200,
       align: 'left'
     },
     {
       label: '产品规格',
       val: 'productStandard',
       width: 200,
       align: 'left'
     },
     {
       label: '订单数量',
       val: 'orderQuantity',
       width: 200,
       align: 'left'
     },
     {
       label: '图纸图号',
       val: 'drawingNumber',
       width: 200,
       align: 'left'
     },
     {
       label: '完工日期',
       val: 'completeDate',
       width: 200,
       align: 'left'
     },
     {
       label: '调试完工单',
       val: 'debuggingOrderUrl',
       width: 200,
       align: 'left'
     },
     {
       label: '验收单与否',
       val: 'dictReceiptYesNo',
       dictType: 'receipt_order_status',
       width: 200,
       align: 'left'
     },
     {
       label: '验收单',
       val: 'receiptUrl',
       width: 200,
       align: 'left'
     },
     {
       label: '状态',
       val: 'dictStatus',
       dictType: 'receipt_order_status',
       width: 200,
       align: 'left'
     }
   ])
   // 获得id
   const { query } = useRoute() // 路由的查询
   const contentHeight = ref(0)
   onMounted(async () => {
     formLoading.value = true
     if (query.id) {
       formData.value = await MarketingReceiptApi.getMarketingReceipt(query.id)
     }
     contentHeight.value = document.body.clientHeight - 127
     formLoading.value = false
   })
</script>
<style lang="scss" scoped>
   .contentView {
     padding: 10px;
     background: #fff;
   }
   .baseTitle {
     font-weight: bold;
     padding: 20px 0;
   }
   .tableIpt {
     :deep(.el-input__inner) {
       text-align: center;
     }
   }
</style>